﻿@using AiXiu.Model
@model TBUsers
@{
    ViewBag.Title = "UserVideos";
    string nickName = Model.NickName ?? "用户" + Model.Id;
    string address = Model.Address ?? "未知地";
    string birthday = Model.Birthday.HasValue ? Model.Birthday.Value.ToString("MM-dd") : "未设置";
    string hobby = Model.Hobby ?? "未添加";

    // 如果为本人，则隐藏好友及聊天按钮
    bool isSelf = ViewBag.isSelf;

    //// 判断是否是好友
    bool isFriend = ViewBag.isFriend;
}

<style>
    .videos {
        width: 100%;
    }

        .videos .item {
            width: 49%;
            margin-left: 0.5%;
            margin-right: 0.5%;
            float: left;
            padding-bottom: 0.6em;
        }

        .videos img {
            width: 100%;
            height: auto;
        }
</style>

<div class="page" data-page="user-videos">
    <div class="page-content">
        <div class="block-title">TA的个人信息</div>
        <div class="block block-strong personal margin-top-none">
            <div class="row">
                <div class="col-50">
                    <p class="margin-top-quarter margin-bottom-quarter">
                        <i class="f7-icons size-14 text-color-gray margin-right-half">person</i>
                        <label>@nickName</label>
                    </p>
                </div>
                <div class="col-50">
                    <p class="margin-top-quarter margin-bottom-quarter">
                        <i class="f7-icons size-14 text-color-gray margin-right-half">smiley</i>
                        @if (Model.Sex == 1)
                        {
                            <label>男</label>
                        }
                        else if (Model.Sex == 2)
                        {
                            <label>女</label>
                        }
                        else
                        {
                            <label style="display:none"></label>
                        }
                    </p>
                </div>
                <div class="col-50">
                    <p class="margin-top-quarter margin-bottom-quarter">
                        <i class="f7-icons size-14 text-color-gray margin-right-half">placemark</i>
                        <label>@address</label>
                    </p>
                </div>
                <div class="col-50">
                    <p class="margin-top-quarter margin-bottom-quarter">
                        <i class="f7-icons size-14 text-color-gray margin-right-half">gift</i>
                        <label>@birthday</label>
                    </p>
                </div>
                <div class="col-100">
                    <p class="margin-top-quarter margin-bottom-quarter">
                        <i class="f7-icons size-14 text-color-gray margin-right-half">heart</i>
                        <label>@hobby</label>
                    </p>
                </div>
            </div>
        </div>
        <div class="block-title">TA发布的视频</div>
        <div class="block block-strong">
            <div class="videos">
                @foreach (TBVideos item in Model.TBVideos)
                {
                    <div class="item">
                        <a class="link cover external" href="@Url.Action("Play","Video")?videoId=@item.VideoId ">
                            <img src="/imgs/rectangle.jpg" data-src="@item.CoverURL" class="lazy" />
                        </a>
                    </div>
                }
            </div>
        </div>
        <div class="block block-strong" id="btnFriendBlock" runat="server">
            <input type="button" id="btnFriend" value="加为好友" class="button button-large button-outline button-fill"/>
            <input type="button" id="btnMessage" value="立即聊天" class="button button-large button-outline button-fill" />
        </div>
    </div>
</div>
@section footScript{
    <script src="~/lib/masonry-layout/dist/masonry.pkgd.min.js"></script>
    <script>
        // 图片懒加载
        app.on('lazyLoaded', function () {
            // 图片流布局
            new Masonry('.videos', {
                itemSelector: '.item',
                columnWidth: '.item',
                percentPosition: true
            })
        })
    </script>
    <script>
        $(function () {
            if ("@isSelf" == "True") {
                $("#btnFriendBlock").hide();
            }
            if ("@isFriend" == "True") {
                $("#btnFriend").hide();
            }

            $("#btnFriend").click(function () {
                $.post("@Url.Action("AddFriend", "Friends") ", { userId: "@Model.Id" }, function (data) {
                    if (data.StatusCode == 0) {
                        location.href = "@Url.Action("Chat", "Friends")?to=@Model.Id";
                    } else {
                         layer.msg(data.Message, { icon: 2 });
                     }
                });
            });

            $("#btnMessage").click(function () {
                location.href="@Url.Action("Chat", "Friends")?to=@Model.Id";
            });
        })
    </script>
}